@charset "UTF-8";
img {
  width: 100%; }

/***************云***************/
.yun .yun_01 {
  -webkit-animation: yun_01 30s ease-in-out 1s infinite;
  animation: yun_01 30s ease-in-out 1s infinite; }

@-webkit-keyframes yun_01 {
  from { }
  25% {
    -webkit-transform: translateY(-100px) rotate(360deg);
    transform: translateY(-100px) rotate(360deg); }
  50% {
    -webkit-transform: translateY(200px) translateX(150px) rotate(180deg);
    transform: translateY(200px) translateX(150px) rotate(180deg); }
  75% {
    -webkit-transform: translateX(200px) translateY(100px) rotate(120deg);
    transform: translateX(200px) translateY(100px) rotate(120deg); }
  to { } }

.yun .yun_02 {
  -webkit-animation: yun_02 15s linear 2s infinite;
  animation: yun_02 15s linear 2s infinite; }

@-webkit-keyframes yun_02 {
  from { }
  25% {
    -webkit-transform: translateX(-60px);
    transform: translateX(-60px); }
  50% {
    -webkit-transform: translateY(50px) translateX(100px);
    transform: translateY(50px) translateX(100px); }
  75% {
    -webkit-transform: translateX(150px) translateY(100px);
    transform: translateX(150px) translateY(100px); }
  to { } }

.yun .yun_03 {
  -webkit-animation: yun_03 20s ease-in 2s infinite;
  animation: yun_03 20s ease-in 2s infinite; }

@-webkit-keyframes yun_03 {
  from { }
  25% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px); }
  50% {
    -webkit-transform: translateX(25px);
    transform: translateX(25px); }
  to { } }

.yun .yun_04 {
  -webkit-animation: yun_04 20s ease-in 1s infinite;
  animation: yun_04 20s ease-in 1s infinite; }

@-webkit-keyframes yun_04 {
  from { }
  25% {
    -webkit-transform: translateX(50px);
    transform: translateX(50px); }
  50% {
    -webkit-transform: translateX(25px);
    transform: translateX(25px); }
  to { } }

.yun .yun_05 {
  -webkit-animation: yun_05 10s ease-in 5s infinite;
  animation: yun_05 10s ease-in 5s infinite; }

@-webkit-keyframes yun_05 {
  from { }
  25% {
    -webkit-transform: translateX(50px);
    transform: translateX(50px); }
  50% {
    -webkit-transform: translateX(25px);
    transform: translateX(25px); }
  to { } }

/***************选项***************/
.xuanze:hover {
  -webkit-animation: pulse 1s both;
  animation: pulse 1s both; }

@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }

@keyframes flash {
  from, 50%, to {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }

/***************音符***************/
.music .yin_1 {
  -webkit-animation: yin_1 6s linear infinite;
  animation: yin_1 6s linear infinite; }

@-webkit-keyframes yin_1 {
  from { }
  40% {
    -webkit-transform: rotate(36deg);
    transform: rotate(36deg); }
  80% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); }
  to { } }

@keyframes yin_1 {
  from { }
  40% {
    -webkit-transform: rotate(36deg);
    transform: rotate(36deg); }
  80% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); }
  to { } }

.music .yin_2 {
  -webkit-animation: yin_2 5s linear infinite;
  animation: yin_2 5s linear infinite; }

@-webkit-keyframes yin_2 {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes yin_2 {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

.music .yin_3 {
  -webkit-animation: yin_3 4s linear infinite;
  animation: yin_3 4s linear infinite; }

@-webkit-keyframes yin_3 {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes yin_3 {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

.music .yin_4 {
  -webkit-animation: yin_4 4s linear infinite;
  animation: yin_4 4s linear infinite; }

@-webkit-keyframes yin_4 {
  from {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes yin_4 {
  from {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

.music .yin_5 {
  -webkit-animation: yin_5 7s linear infinite;
  animation: yin_5 7s linear infinite; }

@-webkit-keyframes yin_5 {
  from {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes yin_5 {
  from {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

/***************狗***************/
.dog:hover {
  -webkit-animation: shake 1s both infinite;
  animation: shake 1s both infinite;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom; }

@-webkit-keyframes shake {
  from {
    -webkit-transform: none;
    transform: none; }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to {
    -webkit-transform: none;
    transform: none; } }

@keyframes shake {
  from {
    -webkit-transform: none;
    transform: none; }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to {
    -webkit-transform: none;
    transform: none; } }

/***************弹窗***************/
.tanchuang {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center; }
  .tanchuang .dog_tc {
    margin: 0 auto;
    width: 26.3%;
    overflow: hidden;
    margin-top: 185px; }
  .tanchuang .jiantou {
    width: 20%;
    overflow: hidden;
    position: absolute;
    top: 80px;
    right: 66px; }
  .tanchuang .zi {
    font-size: 20px;
    color: #fff;
    font-family: "幼圆";
    padding: 10px 10px; }
  .tanchuang .qrcode {
    width: 49%;
    position: absolute;
    overflow: auto;
    margin: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  .tanchuang .zi_s {
    text-align: center;
    font-size: 15px;
    color: #fff;
    font-family: "幼圆";
    padding: 10px 10px;
    top: 70%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute; }

input[type="checkbox"] {
  display: none; }

input:checked ~ .tanchuang {
  display: block; }

/***************气泡框***************/
.blue {
  width: 70%;
  height: 28px;
  border-radius: 8px;
  position: relative;
  background: #75b9ff;
  text-align: center; }

.blue:after {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  left: 120px;
  border-left: 5px solid transparent;
  border-bottom: 10px solid  #75b9ff;
  border-right: 13px solid transparent; }

.red {
  width: 60%;
  height: 28px;
  border-radius: 8px;
  position: relative;
  background: #f346f3;
  padding: 0px 16px; }

.red:after {
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: -9px;
  border-top: 10px solid transparent;
  border-bottom: 12px solid  transparent;
  border-right: 20px solid #f346f3; }
